<template>
  <div>
    <h2>t-comment demo</h2>
    <section>
      <div class="q-pa-md" style="max-width: 400px">
        <t-form
          ref="formRef"
          @submit="onSubmit"
          @reset="onReset"
          class="q-gutter-md"
        >
          <t-input
            filled
            v-model="form.pageId"
            label="Page Id"
            lazy-rules
            :rules="[val => (val && val.length > 0) || '请输入 pageId']"
          />

          <t-input
            filled
            v-model="form.dataId"
            label="dataId"
            lazy-rules
            :rules="[val => (val !== null && val !== '') || '请输入 dataId']"
          />

          <t-input
            filled
            v-model="form.commentTitle"
            label="Comment Title"
          />

          <t-toggle
            v-if="false"
            v-model="accept"
            label="I accept the license and terms"
          />

          <div class="row content-end">
            <t-btn
              label="Reset"
              type="reset"
              color="primary"
              flat
              class="q-mr-sm"
            />
            <t-button label="评论" type="submit" color="primary" />
          </div>
        </t-form>
      </div>
    </section>

    <CommentDrawer v-model:visible="drawerVisible" :comment-options="form" />

  </div>
</template>

<script>
import { useQuasar } from '@teld/q-components';
import { ref, onMounted } from 'vue';
import CommentDrawer from './comment-drawer.vue';

export default {
  components: { CommentDrawer },
  setup() {
    const $q = useQuasar();

    const name = ref(null);
    const age = ref(null);
    const accept = ref(false);
    const drawerVisible = ref(false);
    const genFormModel = () => {
      return {
        pageId: '',
        dataId: '',
        commentTitle: '',
      };
    };
    const formRef = ref();
    const form = ref(genFormModel());

    async function onSubmit() {
      const valid = await formRef.value.validate();
      drawerVisible.value = valid;

      // if (!form.value.pageId) {
      //   $q.notify({
      //     color: 'red-5',
      //     textColor: 'white',
      //     icon: 'warning',
      //     message: '请输入 pageId',
      //   });
      //   return;
      // } else {
      //   $q.notify({
      //     color: 'green-4',
      //     textColor: 'white',
      //     icon: 'cloud_done',
      //     message: 'Submitted',
      //   });
      // }
    }

    onMounted(() => {
      Object.assign(form.value, {
        dataId: 'comment-demo-data-id-001',
        pageId: 'comment-demo-page-id-001',
        commentTitle: '评论功能测试用-001',
      });
    });

    return {
      name,
      age,
      accept,
      form,
      formRef,
      drawerVisible,

      onSubmit,

      onReset() {
        name.value = null;
        age.value = null;
        accept.value = false;
      },
    };
  },
};
</script>

<style></style>
